<template>
  <view class="container" :style="{backgroundImage: `url(${staticImgs.bg})`}">
    <image :src="staticImgs.title" class="title" />
    <image :src="staticImgs.btn" class="unlock-btn" @click="payHandle" />
    <image :src="staticImgs.hand" class="hand" @click="payHandle" />
    <view :style="{backgroundImage: `url(${staticImgs.price})`}" class="price-bg">
      <text><text class="small">&yen;</text>{{sclInfo.originalPrice}}</text>
      <text :style="{marginLeft: '20rpx'}">券后</text>
      <text :style="{marginLeft: '6rpx'}"><text class="small">&yen;</text>{{sclInfo.newOriginalPrice}}</text>
    </view>
    <image :src="staticImgs.back" class="back-btn" mode="widthFix" @click="backHandle" />
  </view>
</template>

<script>
  import {orderPay} from '@/common/api/scl_api.js'
  import {removeEmptyProperty} from '@/common/utils/util.js'
  import {debounce} from 'lodash'

  export default {
    props: {
      sclId: {
        type: String,
        default: '',
      },
      sclName: {
        type: String,
        default: '',
      },
      couponInfo: {
        type: Object,
        default: {},
      },
      sclInfo:{
        type: Object,
        default: {},
      }
    },
    data() {
      return {
        staticImgs: {
          title: this.imgBaseURL + '/scl/introduce/animalforest/title.png',
          bg: this.imgBaseURL + '/scl/ad/animalforest/bg.png',
          hand: this.imgBaseURL + '/scl/ad/animalforest/hand.png',
          back: this.imgBaseURL + '/scl/ad/animalforest/back-btn.png',
          btn: this.imgBaseURL + '/scl/ad/animalforest/btn.png',
          price: this.imgBaseURL + '/scl/ad/animalforest/price-bg.png'
        },
        loading: false
      }
    },
    methods: {
      backHandle() {
        uni.reLaunch({
          url: '/pages/sclList/sclList'
        })
      },
      payHandle: debounce(async function(payHandleType) {
        if (this.loading) return
        uni.showLoading({
          title: "请求支付中..."
        })

        this.loading = true

        console.log(payHandleType,'======payHandleType')

        const that = this
        const submitForm = removeEmptyProperty({
          sclId: this.sclId,
          orderType: '7',
          adClickId: uni.getStorageSync('adClickId')
        })

        const {data: tmpRes} = await this.$u.api.getWxPayToken({
          sclId: this.sclId
        })
        submitForm.sclPayToken = tmpRes.data
        orderPay(submitForm).then(res => {
          if (res.data.code == 200) {
            uni.requestPayment({
              provider: 'wxpay',
              service: 5,
              orderInfo: res.data.data.wr,
              timeStamp: res.data.data.wr.timeStamp,
              nonceStr: res.data.data.wr.nonceStr,
              package: res.data.data.wr.packageValue,
              signType: res.data.data.wr.signType,
              paySign: res.data.data.wr.paySign,
              success: function(res) {
                that.$store.dispatch('user/getUserDiscountTakeEffect')
                that.$emit('payOk')
              },
              fail: function(err) {
                that.$showToast(res.data.message);
                uni.showLoading()

                setTimeout(() => {
                  uni.hideLoading()
                  that.loading = false
                }, 300)
              }
            });
          } else {
            uni.hideLoading()
            that.$showToast(res.data.message);
            
            setTimeout(()=>{
              this.loading = false
            },300)
          }
        }).catch(e => {
          setTimeout(() => {
            this.loading = false
          }, 300)
        })

      }, 500)
    },
    mounted() {
      uni.setNavigationBarColor({
        frontColor: '#ffffff',
        backgroundColor: '#000000'
      })
    },
    beforeDestroy() {
      uni.setNavigationBarColor({
        frontColor: '#000000',
        backgroundColor: '#ffffff'
      })
    }
  }
</script>

<style lang="scss" scoped>
  @keyframes zoom {
    0% {
      transform: scale(1);
    }
    50% {
      transform: scale(1.5);
    }
    100% {
      transform: scale(1);
    }
  }

  .container {
    height: 1624rpx;
    background-position: center top;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    position: relative;
  }

  .title {
    position: absolute;
    left: 0;
    right: 0;
    top: 223rpx;
    margin: 0 auto;
    width: 650rpx;
    height: 163rpx;
  }

  .unlock-btn {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 282rpx;
    margin: 0 auto;
    width: 558rpx;
    height: 227rpx;
  }

  .hand {
    position: absolute;
    right: 50rpx;
    width: 166rpx;
    height: 166rpx;
    bottom: 230rpx;
    animation: zoom 2s linear infinite;
  }

  .price-bg {
    width: 552rpx;
    height: 91rpx;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 168rpx;
    margin: 0 auto;
    font-weight: bold;
    font-size: 40rpx;
    color: #FFF;
    display: flex;
    align-items: center;
    justify-content: center;
    background-size: 100% 100%;
    background-position: center center;
    background-repeat: no-repeat;

    .small {
      font-size: 21rpx;
    }
  }

  .back-btn {
    position: absolute;
    bottom: 54rpx;
    width: 298rpx;
    left: 0;
    right: 0;
    margin: 0 auto;
  }
</style>